<template>
  <div @click="clickBtn" class="button">
    <Icons
      v-if="isDownload == 'downloading'"
      name="Download"
      class="downloading"
    />
    <Icons
      v-else-if="isDownload == 'downloaded'"
      name="Check"
      class="downloaded"
    />
    <Icons v-else name="Bottom" class="download" />
    <span ref="text" class="text">download</span>
    <span ref="progressRef" class="propress"></span>
  </div>
</template>

<script setup lang="ts">
let progressRef = ref();
let text = ref();
let isDownload = ref("download");
const props = withDefaults(
  defineProps<{
    width?: number;
    height?: number;
  }>(),
  { width: 200, height: 40 },
);
console.log(props.width);
let sleep = (time: number) =>
  new Promise((resolve) => setTimeout(() => resolve(1), time));
const clickBtn = async () => {
  progressRef.value.classList.add("progress-animate");
  text.value.innerText = "downloading";
  isDownload.value = "downloading";
  const res = await sleep(2000);
  progressRef.value.classList.add("pro-com");
  if (res == 1) {
    isDownload.value = "downloaded";
    progressRef.value.classList.add("complete-animate");
    // text.value.style.color = "#fff";
    text.value.classList.add("download-text");
    text.value.innerText = "downloaded";
  }
};

onMounted(() => {
  const dom = document.querySelector(".button") as HTMLElement;
  dom?.style.setProperty("--btn-width", props.width + "px");
  dom?.style.setProperty("--btn-height", props.height + "px");
});
</script>

<style lang="scss">
:root {
  --btn-width: 180px;
  --btn-height: 40px;
}
.text {
  z-index: 10;
}
.button {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--btn-width);
  height: var(--btn-height);
  background-color: transparent;
  //   border: 1px solid var(--el-border-color);
  box-shadow: 0 0 2px #ccc;
  border-radius: 5px;
  margin: 0 15px;
  font-size: 18px;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
}
.button:hover {
  color: var(--el-button-hover-text-color);
  border-color: var(--el-button-hover-border-color);
}
.propress {
  content: "";
  position: absolute;
  top: 90%;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #8e54e9, #0a84ff);
}
.progress-animate {
  left: -20px;
  transition-duration: 10s;
}
.complete-animate {
  top: 0;
  transition: top 500ms ease-in-out !important;
}
.download-text {
  color: #fff;
}
.download,
.downloading,
.downloaded {
  margin-right: 5px;
}
.downloaded {
  color: #fff;
  z-index: 10;
}
.pro-com {
  left: 0;
  transition: left 10s;
}
@keyframes tapDownload {
  from {
    transform: translateY(2px);
  }
  to {
    transform: translateY(0);
  }
}
.download {
  animation: tapDownload 1s ease infinite;
}
@keyframes downloading {
  0% {
    transform: scale(0.7);
  }
  100% {
    transform: scale(1);
  }
}
.downloading {
  animation: downloading 1s ease infinite alternate-reverse;
}
</style>
